import React, { Component } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import Header from '@/components/Header';
import List from './List';
import Flist from './Flist';
import Not from '../Notfound'
import { Route, Switch, Redirect } from 'react-router-dom'
import 'animate.css'
class Films extends Component {
    render() {
        let { path } = this.props.match
        return (
            <div>
                <Header {...this.props} />
                <TransitionGroup>
                    <CSSTransition
                        timeout={1000}
                        classNames={{
                            enter: 'animate__animated',
                            enterActive: 'animate__fadeIn',
                            exit: 'animate__animated',
                            exitActive: 'animate__fadeOut',
                          }}
                        unmountOnExit
                        // 通过此key值来判断列表中的子节点需要被插入还是移除，然后触发动画
                        // location.key属性不是一定有，只有路由模式为history时才有
                        // hash可以用 uri
                        key={this.props.location.key}
                    >
                        <Switch location={this.props.location}>
                            <Route path={`${path}/list`} children={router => <List {...router} />} />
                            <Route path={`${path}/flist`} children={router => <Flist {...router} />} />
                            <Redirect exact from={path} to={`${path}/list`} />
                            <Route component={Not} />
                        </Switch>
                    </CSSTransition>
                </TransitionGroup>
            </div >
        );
    }
}

export default Films;
